<template>
  <div class="m-tabs clearfix">
    <el-tabs
      v-model="activeTabs"
      :tab-position="tabpos"
      @tab-click="tabClick"
      :type="tabsStyle"
    >
      <el-tab-pane
        v-for="item in tabsData"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <div v-if="item.tabsDataInfo">
          <el-tabs
            v-model="chidrenActiveTabs"
            :tab-position="tabtoppos"
            @tab-click="tabClickChange"
            stretch
          >
            <el-tab-pane
              v-for="(item1, index1) in item.tabsDataInfo"
              :key="item1.name"
              :label="item1.title"
              :name="item1.name"
            >
              <component v-bind:is="whichcomp1"></component>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-else>
          <component v-bind:is="whichcomp"></component>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BaseTabCon from "@/components/tabpage/BaseTabCon";
import BaseInfo from "@/views/goods/childrenComps/BaseInfo";
import BusinessInfo from "@/views/goods/childrenComps/BusinessInfo";
import ChargeInfo from "@/views/goods/childrenComps/ChargeInfo";
import ResouceInfo from "@/views/goods/childrenComps/ResouceInfo";
export default {
  name: "",
  props: {
    activeTabs: {
      type: String,
      default: "1",
    },
    chidrenActiveTabs: {
      type: String,
      default: "1",
    },
    // 父组件穿过来的tab数据
    tabsData: {
      type: Array,
      default() {
        return [];
      },
    },
    tabsDataInfo: {
      type: Array,
      default() {
        return [];
      },
    },
    tabpos: {
      type: String,
      default: "left",
    },
    //  父组件传递过来的tab位置
    tabtoppos: {
      type: String,
      default: "top",
    },
    tabsStyle: {
      type: String,
      default: "border-card",
    },
  },
  data() {
    return {
      currentIndex: 0,

      whichcomp: BaseInfo,
      whichcomp1: BaseInfo,
    };
  },
  directives: {},
  components: {
    BaseTabCon,
    BaseInfo,
    BusinessInfo,
    ResouceInfo,
    ChargeInfo,
  },
  created() {},

  mounted() {},
  methods: {
    tabClick(targetName, action) {
      this.$emit("tabsChange", targetName);
      switch (targetName.label) {
        case "基本信息":
          this.whichcomp = BaseInfo;
          break;
        case "业务信息":
          this.whichcomp = BusinessInfo;
          break;
        case "资费信息":
          this.whichcomp = ChargeInfo;
          break;
        case "资源信息":
          this.whichcomp = ResouceInfo;
          break;
      }
    },
    tabClickChange(targetName, action) {
      this.$emit("tabClickChange", targetName);
    },
  },
};
</script>
<style>
.m-tabs {
  min-height: 500px;
  background-color: #fff;
}
</style>
